<template>
    <div class="login-wrapper">
        <div class="login">
            <div class="top">
                <img src="./logo.png" width="260px" alt="">
                <!--<p class="sub-title">物资管理系统</p>-->
            </div>
            <div class="login-main">
                <p style="font-size: 20px">物资监管系统</p>
                <div class="inputs">
                    <p>
                        <el-input
                                v-model="usercode"
                                placeholder="请输入内容"
                                clearable>
                        </el-input>
                    </p>
                    <p>
                        <el-input
                                v-model="userpwd"
                                placeholder="请输入密码"
                                type="password"
                                clearable
                                @keyup.enter.native="login">
                        </el-input>
                    </p>
                    <p>
                        <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                    </p>
                    <p>
                        <el-button type="primary" @click="login">
                            登录
                        </el-button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex'

    export default {
        name: "login",
        data() {
            return {
                // activeName: 'second'
                usercode: '',
                userpwd: '',
                rememberMe:false
            };
        },
        computed: {},
        methods: {
            ...mapMutations([
                'EVAL_USER_MESSAGE'
            ]),
            login() {
                this.$axiosPost("/login.action", {"usercode": this.usercode, "userpwd": this.userpwd,"rememberMe":this.rememberMe}).then((res) => {
                    if (res.code == 200) {
                        this.EVAL_USER_MESSAGE(res.userInfo);
                        this.$router.push({path: '/home'})
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    }
</script>

<style lang="scss">
    .login-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        background: url("./background.5825f033.svg");
        .login {
            position: absolute;
            top: 40%;
            left: 50%;
            margin-left: -184px;
            transform: translateY(-50%);
            width: 368px;
            text-align: center;
            .top {
                margin: 15px;
                .sub-title {
                    margin-top: 15px;
                    color: $color-l;
                    font-size: $font-size-14;
                }
            }
            .login-main {
                margin-top: 0px;
                h5 {
                    letter-spacing: 15px;
                    color: $color-normal;
                    font-size: $font-size-big;
                }
                .inputs {
                    margin: 15px;
                    p {
                        width: 100%;
                        margin-bottom: 15px;
                        button {
                            display: inline-block;
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
</style>
